import 'package:flutter/material.dart';

class AnimatedWidgetsTest extends StatefulWidget {
  const AnimatedWidgetsTest({super.key});

  @override
  _AnimatedWidgetsTestState createState() => _AnimatedWidgetsTestState();
}

class _AnimatedWidgetsTestState extends State<AnimatedWidgetsTest> {
  double _padding = 10;
  var _align = Alignment.topRight;
  double _height = 100;
  double _left = 0;
  Color _color = Colors.red;
  TextStyle _style = TextStyle(color: Colors.black);
  final Color _decorationColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    var duration = Duration(seconds: 5);
    return Scaffold(
      appBar: AppBar(title: Text("动画过渡组件")),
      body: SingleChildScrollView(
        child: Column(
          children:
              <Widget>[
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _padding = 20;
                    });
                  },
                  child: AnimatedPadding(
                    duration: duration,
                    padding: EdgeInsets.all(_padding),
                    child: Text("AnimatedPadding"),
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Stack(
                    children: <Widget>[
                      AnimatedPositioned(
                        duration: duration,
                        left: _left,
                        child: ElevatedButton(
                          onPressed: () {
                            setState(() {
                              _left = 100;
                            });
                          },
                          child: Text("AnimatedPositioned"),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 100,
                  color: Colors.grey,
                  child: AnimatedAlign(
                    duration: duration,
                    alignment: _align,
                    child: ElevatedButton(
                      onPressed: () {
                        setState(() {
                          _align = Alignment.center;
                        });
                      },
                      child: Text("AnimatedAlign"),
                    ),
                  ),
                ),
                AnimatedContainer(
                  duration: duration,
                  height: _height,
                  color: _color,
                  child: ElevatedButton(
                    onPressed: () {
                      setState(() {
                        _height = 150;
                        _color = Colors.blue;
                      });
                    },
                    child: Text(
                      "AnimatedContainer",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                AnimatedDefaultTextStyle(
                  style: _style,
                  duration: duration,
                  child: GestureDetector(
                    child: Text("hello world"),
                    onTap: () {
                      setState(() {
                        _style = TextStyle(
                          color: Colors.blue,
                          decorationStyle: TextDecorationStyle.solid,
                          decorationColor: Colors.blue,
                        );
                      });
                    },
                  ),
                ),
                // AnimatedDecoratedBox(
                //   duration: duration,
                //   decoration: BoxDecoration(color: _decorationColor),
                //   child: FlatButton(
                //     onPressed: () {
                //       setState(() {
                //         _decorationColor = Colors.red;
                //       });
                //     },
                //     child: Text(
                //       "AnimatedDecoratedBox",
                //       style: TextStyle(color: Colors.white),
                //     ),
                //   ),
                // )
              ].map((e) {
                return Padding(
                  padding: EdgeInsets.symmetric(vertical: 16),
                  child: e,
                );
              }).toList(),
        ),
      ),
    );
  }
}
